<template>
  <div v-if="isReady">
    <div class="vertical-align-center command">
      <el-button type="primary" size="small" link>
        <el-icon><WarningFilled /></el-icon>
        <span>此图表数据对象为</span>
        <b><u>机场起降架次</u></b>
      </el-button>
      <ConfigBar @change="chart.refresh()" />
      <ConfigPanel @change="chart.refresh()" />
      <WarningPanel :warnings="seriesData.warnings" />
      <LoaderPanel @change="chart.refresh()" />
    </div>
    <el-scrollbar ref="scrollbar" @wheel="handleMouseWheel">
      <ChartContent ref="chart" :data="seriesData" />
    </el-scrollbar>
  </div>
  <EmptyStatus v-else />
</template>

<script setup>
import { ref, computed, nextTick, watch, onMounted, onUnmounted, h } from "vue";
import useFlowStore from "@/store/flow.js";
import EmptyStatus from "../../EmptyStatus/index.vue";
import ConfigBar from "./ConfigBar.vue";
import ConfigPanel from "./ConfigPanel.vue";
import WarningPanel from "./WarningPanel.vue";
import LoaderPanel from "./LoaderPanel.vue";
import ChartContent from "./ChartContent.vue";
import DataGenerator from "./DataGenerator.js";
const flowStore = useFlowStore();

const chart = ref();

const dynamicConfig = {
  chartSize: 80,
  chartType: "bar",
  dataGranularity: 2,
  dataInterval: 2,
  dataStep: 2,
  showTotal: true,
  showTotalLine: true,
  showSector: true,
  showSectorLine: true,
  chartStack: true,
  chartEmphasis: true,
  chartFill: false,
  chartPolar: false,
  showConfig: false,
  chartSmooth: true,
  type: "TMA",
};

const config = computed(() => {
  if (flowStore.chartConfig.airportsChart != null) {
    return flowStore.chartConfig.airportsChart;
  } else {
    return dynamicConfig;
  }
});

const isReady = computed(
  () => seriesData.value && flowStore.chartConfig.airportsChart
);

const seriesData = computed(() => {
  return DataGenerator({
    rawData: flowStore.rawDataAirports,
    tags: flowStore.tagsAirportFlow,
    begTime: flowStore.begTimeAirports,
    dataInterval: config.value.dataInterval,
    dataStep: config.value.dataStep,
    flowLimits: flowStore.airportFlowLimits,
  });
});

const scrollbar = ref();
const handleMouseWheel = (e) => {
  // console.log("handleMouseWheel", e);
  // scrollbar.value.setScrollLeft();
  // e.preventDefault();
  const wheelDelta = e.wheelDelta || -e.deltaY * 40;
  scrollbar.value.setScrollLeft(
    scrollbar.value.wrapRef.scrollLeft - wheelDelta
  );
};

onMounted(() => {
  if (!flowStore.chartConfig.airportsChart) {
    flowStore.chartConfig.airportsChart = JSON.parse(
      JSON.stringify(dynamicConfig)
    );
  }
  window.addEventListener("resize", () => {
    console.log("ChartAirports: Chart will be refreshed due to window resized");
    chart.value.refresh();
  });
});
</script>

<style scoped>
.command {
  width: 100%;
}
.command > * {
  margin: 0 12px;
}
</style>
